<template>
  <view class="flex-col page">
    <!-- <u-navbar title="首页" leftIcon=" " :autoBack="true" bgColor="#05151e" titleStyle ='color:#fff' placeholder="true"></u-navbar> -->
    <view class="flex-col section">
      <view class="flex-col group">
        <view class="flex-col justify-start items-start self-stretch text-wrapper">
          <text class="text text_2">行情拿捏</text>
        </view>
        <image class="shrink-0 self-start image"
          src="http://ts.ysgzt.cn/static/images/wechat/resources/c47c4acc83210b2b73cc412f7ecceedc.png" />
      </view>
      <view class="flex-row justify-between items-center section_2">
        <view class="flex-row items-center">
          <view class="flex-row items-center" @click="area">
            <text class="font_2 text">{{ area_name }}</text>
            <image class="ml-6 shrink-0 image_3"
              src="https://www.dlxx.top/static/images/7a71e3275cbc79f4b647a58d02925fd0.png" />
          </view>
          <view class="shrink-0 section_3"></view>

          <u--input placeholder="请输入产品名称" border="none" v-model="keyword"
            customStyle="padding:0;margin:0 10rpx;width:300rpx;"></u--input>
        </view>
        <view class="flex-col justify-start items-center text-wrapper_2" @click="search"><text
            class="text text_4">搜索</text></view>
      </view>
    </view>
    <view class="flex-col group_2">
      <view class="flex-row items-center section_4">
        <view class="flex-row justify-start ">
          <image class="image_4"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/0c492cb7f5ec30575e13f5fe8648c24d.png" />
          <text class="text text_6 ml-9">公告</text>
          <!-- <text class="font text ml-9">开通会员后联系客服进会员交流群</text> -->
        </view>
        <view class="flex-1">
          <u-notice-bar icon=" " url="/pages/news/detail?id=3" :text="notice_list[0]['title']" bgColor='#e5f2f0'
            color="#011613"></u-notice-bar>
        </view>
        <view class="ml-20 flex-row justify-end items-center shrink-0" @click="$util.redirectTo('/pages/news/index')">
          <text class="font_2 text text_7">更多</text>
          <image class="shrink-0 image_5 ml-7"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/649c969947935627670d26a01762a47d.png" />
        </view>
      </view>
      <view class="flex-col section_5">
        <view class="flex-row justify-between items-center group_3">
          <view class="flex-row items-center">
            <image class="shrink-0 image_6"
              src="http://ts.ysgzt.cn/static/images/wechat/resources/cb3605f251bb37285a4116b4d8055a8c.png" />
            <text class="font text text_8 ml-8-5">行情数据</text>
          </view>
          <view class="flex-row relative">
            <view class="shrink-0 self-start section_6"></view>
            <text class="self-center font_3 text text_10">本站非交易平台</text>
            <text class="font_3 text text_9 pos">行情仅供参考</text>
          </view>
        </view>

        <view class="grid mt-6-5">
          <view class="flex-row justify-between items-center grid-item" v-for="(item, index) in list" :key="index"
            @click="hq_history(item)">
            <text class="font text_6 text_6n u-line-1 ">{{ item.name }}</text>
            <text class="font_2 text " v-if="item.type == 1">{{ item.hq_price }}</text>
            <text class="font_2 text " v-if="item.type == 2">{{ item.hq_price }}</text>
            <image class="image_7"
              src="http://ts.ysgzt.cn/static/images/wechat/resources/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
          </view>

        </view>
      </view>
      <view class="flex-col list ">
        <!-- <view class="flex-col justify-start mt-10 section_7 list-item" :style="getBackgroundStyle(item.path)" :class="[{'section_71':item.path === 'js_hq','section_72':item.path === 'jq_jl','section_73':item.path === 'tm_cx','section_74':item.path === 'wd_gz','section_75':item.path === 'tf_jc'}]"  v-for="(item, index) in items" :key="index"> -->
        <view class="flex-col justify-start mt-10 section_7 list-item" :style="[getBackgroundStyle(item.path)]"
          v-for="(item, index) in items" :key="index">
          <view class="flex-col items-center section_8" @click="navTag(item)">
            <text class="font_6 text">{{ item.name }}</text>
            <text class="font_7 text mt-7-5">{{ item.en }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="list_mag">

    </view>
    <view class="flex-col justify-start section_16 ">
      <view class="flex-row">
        <view class="flex-col items-center group_4 equal-division-item"
          @click="$util.redirectTo('/pages/index_new/index_jiu', {}, 'reLaunch')">
          <image class="image_8"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/3d2160163a352c2e30d59748ec789cf4.png" />
          <text class="mt-4 font_8 text text_16">首页</text>
        </view>
        <view class="ml-12 flex-col items-center group_4 equal-division-item"
          @click="$util.redirectTo('/pages/my/jsq', {}, 'reLaunch')">
          <image class="image_8"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/1932f40347c8776a4a0376511baee2db.png" />
          <text class="mt-4 font_8 text">计算器</text>
        </view>
        <view class="ml-12 flex-col items-center group_4 equal-division-item"
          @click="$util.redirectTo('/pages/index/index', {}, 'reLaunch')">
          <image class="image_8"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/3e4fab963aab89266abb422ad574de3a.png" />
          <text class="mt-4 font_8 text">客服</text>
        </view>
        <view class="ml-12 flex-col items-center group_4 equal-division-item"
          @click="$util.redirectTo('/pages/index_new/tab_my', {}, 'reLaunch')">
          <image class="image_8"
            src="http://ts.ysgzt.cn/static/images/wechat/resources/91cd88245ca2b6b17f85b06125b04763.png" />
          <text class="mt-4 font_8 text">我的</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/common/js/config';
export default {
  components: {},
  props: {},
  data() {
    return {
      items: [
        {
          name: '口粮行情',
          path: 'kl_hq',
          en: 'Rations quotes'

        },
        {
          name: '酒水行情',
          path: 'js_hq',
          en: 'Wine quotes'
        },
        {
          name: '进交流群',
          path: 'jq_jl',
          en: 'My concern'
        },
        {
          name: '条码查询',
          path: 'tm_cx',
          en: 'My concern'
        },
        {
          name: '我的关注',
          path: 'wd_gz',
          en: 'Wine quotes'
        },
        {
          name: '投放量检测',
          path: 'tf_jc',
          en: 'Volume monitoring'
        },
      ],
      today: '',
      keyword: '',
      userInfo: '',
      list: [],
      area_id: 0,
      area_name: '全国',
      show_list: false,
      show_level: false,
      show_login: false,
      yueka_money: '',
      nianka_money: '',
      notice_list: [],
    };
  },
  onLoad() {
    /*uni.showLoading({
      title: '加载数据中'
    })
    setTimeout(() => {
      this.getUserInfo();
      // this.getList();
	
    }, 1000);*/


    var Dates = new Date();
    this.today =
      `${Dates.getFullYear()}-${String(Dates.getMonth() + 1).padStart(2, '0')}-${String(Dates.getDate()).padStart(2, '0')}`;


    var area_id = uni.getStorageSync('area_id');
    if (area_id > 0) this.area_id = area_id;
    var area_name = uni.getStorageSync('area_name');
    if (area_name != '全国' && area_name) this.area_name = area_name;


    this.getGroupInfo();
    this.notice()
  },
  onShow() {
    var area_id = uni.getStorageSync('area_id');
    if (area_id != '') this.area_id = area_id;
    var area_name = uni.getStorageSync('area_name');
    if (area_name != '') this.area_name = area_name;
    wx.getLocation({
      type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      success: function (res) {
        const latitude = res.latitude;
        const longitude = res.longitude;
        console.log(`纬度: ${latitude}, 经度: ${longitude}`);

      },
      fail: function (err) {
        console.error('获取位置失败:', err);
      }
    });

    this.getList();
  },
  methods: {
    getBackgroundStyle(path) {
      const imagePathMap = {
        kl_hq: 'img_1.png',
        js_hq: 'img_2.png',
        jq_jl: 'img_3.png',
        tm_cx: 'img_4.png',
        wd_gz: 'img_5.png',
        tf_jc: 'img_6.png',
      };

      const image = imagePathMap[path];
      return {
        backgroundImage: `url('${config.baseUrl}/static/images/wechat/index_new/${image}')`,
      };
    },
    search() {
      console.log(this.keyword)
    },
    //获取公告
    notice() {
      this.$api.sendRequest({
        url: '/api/index/getNewsList',
        data: {
          page: 1,
          page_size: 1
        },
        success: res => {
          //console.log(res.data)
          if (res.code == 1) {
            this.notice_list = [...this.notice_list, ...res.data.data];
          }
        }
      });
    },
    area() {
      this.$util.redirectTo('/pages/index/area');
    },
    hq_history(item) {
      uni.navigateTo({
        url: '/pages/index/detail?id=' + item.id + '&title=' + item.name
      })
    },
    navTag(item) {
      if (item.path == 'tm_cx') {
        uni.navigateToMiniProgram({
          //短链接，可以不填appid
          shortLink: '#小程序://国家政务服务平台/CZZfVeIqqwHstrH',

          success(res) {
            // 打开成功
          }
        })
      } else if (item.path == 'wd_gz') {
        uni.navigateTo({
          url: '/pages/my/collect'
        })
      } else {
        uni.navigateTo({
          url: '/pages/index_mulu/' + item.path
        })
      }

    },
    buy(type) {
      uni.showLoading({
        title: '提交订单中'
      })
      this.$api.sendRequest({
        url: '/api/index/createOrder',
        data: {
          type: type,
          user_id: this.userInfo.id
        },
        success: res => {
          if (res.code == 1) {
            uni.showLoading({
              title: '请求支付中'
            })
            var payData = res.data;
            this.pay(payData)
          } else {
            this.$util.showToast({
              title: '创建订单失败,请重试'
            });
          }
        }
      });
    },
    pay(payData) {
      var that = this;
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: payData.timeStamp ?
          payData.timeStamp : payData
            .timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: function (res) {
          console.log(res)
          uni.hideLoading();
          if (res.errMsg == 'requestPayment:ok') {
            that.$util.showToast({
              title: '支付成功'
            });
            that.show_level = false;
            that.getUserInfo();
          } else {
            console.log(res)
            that.$util.showToast({
              title: '支付失败'
            });
          }
        },
        fail: function (err) {
          uni.hideLoading();
          that.$util.showToast({
            title: '支付失败'
          });
        }
      });
    },
    area() {
      this.$util.redirectTo('/pages/index/area');
    },
    search() {
      this.userInfo = uni.getStorageSync('userInfo');
      if (this.userInfo.mobile) {
        if (this.userInfo.group_id == 2) {
          this.show_list = true;
        } else {
          this.show_level = true;
          return true;
        }
      } else {
        this.show_login = true;
        return true;
      }
      this.getList();
    },
    getList() {
      this.userInfo = uni.getStorageSync('userInfo');
      // if (this.userInfo.group_id == 1) return true;

      this.$api.sendRequest({
        url: '/api/index/getYanList',
        data: {
          keyword: this.keyword,

          area: this.area_id,
          user_id: this.userInfo.id,
        },
        success: res => {
          uni.hideLoading();
          //console.log(res.data)
          if (res.code == 1) {
            this.list = res.data;
          }
        }
      });
    },
    getGroupInfo() {
      this.$api.sendRequest({
        url: '/api/index/getGroupInfo',
        data: {},
        success: res => {
          if (res.code == 1) {
            this.yueka_money = res.data.yueka_money;
            this.nianka_money = res.data.nianka_money;
          }
        }
      });
    },
    detail(item) {

      uni.navigateTo({
        url: '/pages/index/detail?id=' + item.id + '&title=' + item.name
      })
    },
    more() {
      this.userInfo = uni.getStorageSync('userInfo');
      if (this.userInfo.mobile) {
        if (this.userInfo.group_id == 2) {
          this.show_list = true;
        } else {
          this.show_level = true;
          return true;
        }
      } else {
        this.show_login = true;
        return true;
      }
    },
    getUserInfo() {
      this.userInfo = uni.getStorageSync('userInfo');
      this.$api.sendRequest({
        url: '/api/member/info',
        data: {
          user_id: this.userInfo.id
        },
        success: res => {
          if (res.code == 1) {
            uni.setStorageSync('userInfo', res.data);
            this.userInfo = res.data;
          }
        }
      });
    },

  },
};
</script>

<style scoped lang="scss">
.ml-7 {
  margin-left: 14rpx;
}

.mt-6-5 {
  margin-top: 13rpx;
}

.mt-7-5 {
  margin-top: 15rpx;
}

.ml-8-5 {
  margin-left: 17rpx;
}

.ml-9 {
  margin-left: 18rpx;
}

.page {
  background-color: #00000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section {
    padding: 0 10rpx 15rpx 18rpx;
    border-radius: 0rpx 0rpx 0rpx 10rpx;
    background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/ddaca7e26801b74b8b9f53812489dcff.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .group {
      padding: 34rpx 0 60rpx 12rpx;
      height: 254rpx;

      .text-wrapper {
        margin-left: 36rpx;
        padding-top: 97rpx;

        .text_2 {
          margin-left: 69rpx;
          color: #ffffff;
          font-size: 48rpx;
          font-family: FZZDHJW;
          line-height: 44rpx;
        }
      }

      .image {
        margin-top: -61rpx;
        width: 80rpx;
        height: 80rpx;
      }
    }

    .section_2 {
      margin-right: 11rpx;
      padding: 4rpx 5rpx 4rpx 24rpx;
      background-color: #ffffff;
      border-radius: 34rpx;
      border-left: solid 1rpx #00806b;
      border-right: solid 1rpx #00806b;
      border-top: solid 1rpx #00806b;
      border-bottom: solid 1rpx #00806b;

      .text_5 {
        color: #011613;
        line-height: 23rpx;
      }

      .image_3 {
        margin-left: 12rpx;
        width: 16rpx;
        height: 10rpx;
      }

      .section_3 {
        margin-left: 30rpx;
        background-color: #edeff0;
        width: 3rpx;
        height: 34rpx;
        border-left: solid 1rpx #edeff0;
        border-right: solid 1rpx #edeff0;
        border-top: solid 1rpx #edeff0;
        border-bottom: solid 1rpx #edeff0;
      }

      .image_2 {
        margin-left: 23rpx;
        width: 31rpx;
        height: 30rpx;
      }

      .text_3 {
        margin-left: 17rpx;
        color: #999999;
        line-height: 27rpx;
      }

      .text-wrapper_2 {
        padding: 16rpx 0;
        background-color: #00806b;
        border-radius: 29rpx;
        width: 128rpx;
        height: 58rpx;

        .text_4 {
          color: #ffffff;
          font-size: 28rpx;
          font-family: PingFangSC;
          line-height: 26rpx;
        }
      }
    }
  }

  .text_6n {
    width: 70%;
  }

  .group_2 {
    padding: 15rpx 10rpx 0;

    .section_4 {
      padding: 18rpx 24rpx;
      background-color: #00806b1a;
      border-radius: 20rpx;

      .image_4 {
        width: 32rpx;
        height: 25rpx;
      }

      .text_6 {
        color: #00806b;
        font-size: 28rpx;
        font-family: FZZDHJW;
        line-height: 25rpx;
      }

      .text_6n {
        width: 5%;
      }

      .text_7 {
        color: #00806b;
        line-height: 23rpx;
      }

      .image_5 {
        width: 10rpx;
        height: 16rpx;
      }
    }

    .section_5 {
      margin-top: 16rpx;
      padding: 24rpx 0 15rpx;
      background-color: #ffffff;
      border-radius: 10rpx;

      .group_3 {
        padding: 0 24rpx;

        .image_6 {
          width: 34rpx;
          height: 34rpx;
        }

        .text_8 {
          line-height: 26rpx;
        }

        .section_6 {
          margin-top: 18rpx;
          background-image: linear-gradient(87deg, #00806b 0%, #ffffff 100%);
          border-radius: 3rpx;
          width: 144rpx;
          height: 9rpx;
        }

        .font_3 {
          font-size: 22rpx;
          font-family: FZLTTHJW;
          line-height: 22rpx;
          color: #000000;
        }

        .text_10 {
          line-height: 21rpx;
        }

        .text_9 {
          line-height: 21rpx;
        }

        .pos {
          position: absolute;
          left: 3rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .grid {
        padding: 0 12rpx;
        height: 294rpx;
        display: grid;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0;
        column-gap: 0;

        .grid-item {
          padding: 35rpx 22rpx;

          .font_4 {
            font-size: 28rpx;
            font-family: PingFangSC;
            line-height: 22rpx;
            color: #00806b;
          }

          .image_7 {
            width: 9rpx;
            height: 21.6rpx;
          }

          .font_5 {
            font-size: 28rpx;
            font-family: PingFangSC;
            line-height: 22rpx;
            color: #b01431;
          }
        }
      }
    }

    .list {
      padding: 20rpx 0 31rpx;

      .section_7,
      .section_71,
      .section_72,
      .section_73 {
        border-radius: 10rpx;
        background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/6f5415647893bfaf83eaec7a29350f93.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .section_8 {
          padding: 54rpx 0;
          background-color: #00000080;
          border-radius: 10rpx;

          .font_6 {
            font-size: 40rpx;
            font-family: PingFangSC;
            line-height: 38rpx;
            color: #ffffff;
          }

          .font_7 {
            font-size: 24rpx;
            font-family: PingFangSC;
            line-height: 20rpx;
            color: #ffffff;
          }
        }
      }

      .section_71 {
        background-image: url('http://demo.yjcx.com/static/images/wechat/index_new/img_2.png');
      }

      .section_72 {
        background-image: url('http://demo.yjcx.com/static/images/wechat/index_new/img_3.png');
      }

      .section_73 {
        background-image: url('http://demo.yjcx.com/static/images/wechat/index_new/img_4.png');
      }

      .section_74 {
        background-image: url('http://demo.yjcx.com/static/images/wechat/index_new/img_5.png');
      }

      .section_75 {
        background-image: url('http://demo.yjcx.com/static/images/wechat/index_new/img_6.png');
      }

      .list-item {
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }

  .text {
    text-transform: uppercase;
  }

  .font {
    font-size: 28rpx;
    font-family: PingFangSC;
    line-height: 28rpx;
    color: #011613;
  }

  .font_2 {
    font-size: 24rpx;
    font-family: PingFangSC;
    line-height: 22rpx;
  }

  .section_16 {

    background-image: url('http://ts.ysgzt.cn/static/images/wechat/resources/5732f414e68eb66db19aebd4dab40162.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .group_4 {
      flex: 1 1 169.5rpx;

      .image_8 {
        width: 48rpx;
        height: 48rpx;
      }

      .font_8 {
        font-size: 20rpx;
        font-family: PingFangSC;
        line-height: 20rpx;
        color: #011613;
      }

      .text_16 {
        color: #00806b;
      }
    }

    .equal-division-item {
      padding: 10rpx 0;
    }
  }
}
</style>